const Home = {
    template: `
        <div class="home my_width">
            <!-- 背景-->
            <div class="home_bg_title">
                <div class="home_bg">
                    <img src="../imgs/cities.jpg">
                </div>
                <p class="home_title">轻轻一点 享受即刻开始</p>
                <a href="javascript:;">
                    <button type="button">新型民宿看一看</button>
                </a>
            </div>
            <!-- 遮罩 -->
            <div class="shade">
                <!-- 搜索房源 -->
                <div class="housing_resource">
                    <div class="options">
                        <div class="internal" :class="{options_internal_color:isOptionsInternalColor}" @click="changeInternal">国内</div>
                        <div class="international" :class="{options_international_color:isOptionsInternationalColor}" @click="changeInternational">国际/港澳台</div>
                    </div>
                    <div class="tiem_address_number">
                        <div class="location">
                            <div class="position">广东省肇庆市</div>
                            <div class="current_position">
                                <i class="fa fa-map-marker" aria-hidden="true"></i>
                                <span>当前位置</span>
                            </div>
                        </div>
                        <div class="time_number">
                            <div class="days">
                                <span>5月24日-5月25日</span>
                                <span>共1晚</span>
                            </div>
                            <div>房客人数</div>
                        </div>
                        <div class="home_address">
                            <input type="text" placeholder="住房地址">
                        </div>
                        <button type="button" class="search_housing_resource">
                            搜索房源
                        </button>
                    </div>
                </div>
                <!-- 服务 -->
                <div class="home_server">
                    <a href="javascript:;" class="icon_content">
                        <i class="fa fa-cutlery" aria-hidden="true"></i>
                        <div>随意做饭</div>
                    </a>
                    <a href="javascript:;" class="icon_content">
                        <i class="fa fa-home" aria-hidden="true"></i>
                        <div>独立空间</div>
                    </a>
                    <a href="javascript:;" class="icon_content">
                        <i class="fa fa-key" aria-hidden="true"></i>
                        <div>随时入住</div>
                    </a>
                    <a href="javascript:;" class="icon_content">
                        <i class="fa fa-camera" aria-hidden="true"></i>
                        <div>美的体验</div>
                    </a>
                    <a href="javascript:;" class="icon_content">
                        <i class="fa fa-jpy" aria-hidden="true"></i>
                        <div>纵享优惠</div>
                    </a>

                </div>
                <div class="discounts">
                    <p class="title">盛夏优惠</p>
                    <p class="mytitle_explain">天天折扣 不一样的惊喜</p>
                </div>
                <!-- 地方列表 -->
                <div class="location_label">
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                    <span>肇庆</span>
                </div>
                <!-- 推荐列表 -->
                <div class="house_list_btn">
                    <div class="house_list">
                        <a class="house_show" href="detail.html">
                            <div class="house_img">
                                <img src="../imgs/room1.jpg">
                            </div>
                            <p class="house_config">公寓·1室1卫1床</p>
                            <p class="house_title">阳光舒适齐全</p>
                            <p class="home_price">￥99 <span>￥100</span> /晚</p>
                            <div class="stars">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </div>
                            <div class="evaluate_landlord">较好房东</div>
                        </a>
                        <div class="house_show">
                            <div class="house_img">
                                <img src="../imgs/room1.jpg">
                            </div>
                            <p class="house_config">公寓·1室1卫1床</p>
                            <p class="house_title">阳光舒适齐全</p>
                            <p class="home_price">￥99 <span>￥100</span> /晚</p>
                            <div class="stars">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </div>
                            <div class="evaluate_landlord">较好房东</div>
                        </div>
                        <div class="house_show">
                            <div class="house_img">
                                <img src="../imgs/room1.jpg">
                            </div>
                            <p class="house_config">公寓·1室1卫1床</p>
                            <p class="house_title">阳光舒适齐全</p>
                            <p class="home_price">￥99 <span>￥100</span> /晚</p>
                            <div class="stars">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </div>
                            <div class="evaluate_landlord">较好房东</div>
                        </div>
                        <div class="house_show">
                            <div class="house_img">
                                <img src="../imgs/room1.jpg">
                            </div>
                            <p class="house_config">公寓·1室1卫1床</p>
                            <p class="house_title">阳光舒适齐全</p>
                            <p class="home_price">￥99 <span>￥100</span> /晚</p>
                            <div class="stars">
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                <i class="fa fa-star-o" aria-hidden="true"></i>
                            </div>
                            <div class="evaluate_landlord">较好房东</div>
                        </div>
                    </div>
                    <button type="button">显示更多肇庆特惠房源</button>
                </div>
                <!-- 优惠列表 -->
                <div class="discounts_list">
                    <p class="title">冰点优惠</p>
                    <p class="mytitle_explain">更多优惠选择</p>
                    <div class="time_list">
                        <div class="limit_discounts ">
                            <span>限时6折</span>
                            <img src="../imgs/discounts/onebigroom.jpg" alt="">
                        </div>
                        <div class="more_discounts ">

                            <div>
                                <span>限时7折</span>
                                <img src="../imgs/discounts/smallimgs.jpg" alt="">
                            </div>

                            <div>
                                <span>限时9折</span>
                                <img src="../imgs/discounts/smallimgs2.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 更多列表 -->
                <div class="more_list">
                    <p class="title">你可能想去</p>
                    <p class="mytitle_explain">发现更好的地方</p>
                    <div class="address_imgs_list">
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <span>上海</span>
                                    <img src="../imgs/more_list/li-yang-5h_dMuX_7RE-unsplash.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>南京</span>
                                    <img src="../imgs/more_list/jennifer-chen-Pnc2Uxb7PG0-unsplash.jpg" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span>广州</span>
                                    <img src="../imgs/more_list/hiurich-granja-0MSERV43jN0-unsplash.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            isOptionsInternalColor: false,
            isOptionsInternationalColor: true
        }

    },
    methods: {
        changeInternal() {
            this.isOptionsInternalColor = false;
            this.isOptionsInternationalColor = true;
        },
        changeInternational() {
            this.isOptionsInternalColor = true;
            this.isOptionsInternationalColor = false;
        }
    },

};
const Collect = {
    template: `
    <div>
        <div class="collect my_width my_padding">
            <div class="collect_box">
                <p class="collect_title">收藏</p>
                <div class="collection_history">
                    <a class="my_collection">
                        <div class="icon_collection">
                            <i class="fa fa-folder-o" aria-hidden="true"></i>
                        </div>
                        <div class="text">
                            <span>我的集合</span>
                            <span>共1个</span>
                        </div>
                    </a>
                    <a class="history">
                        <div class="icon_collection">
                            <i class="fa fa-history" aria-hidden="true"></i>
                        </div>
                        <div class="text">
                            <span>历史足迹</span>
                            <span>最近浏览的房源</span>
                        </div>
                    </a>
                </div>
                <div class="collect_list">
                    <div class="collect_row">
                        <div class="total">2个房源</div>
                        <div class="share_edit" @click="handleShareEdit">{{shareEditText}}</div>
                    </div>
                    <ul>
                        <li>
                            <input type="checkbox" v-show="isCheckBoxShow">
                            <a href="detail.html">
                                <div class="thumbnail">
                                    <img src="../imgs/room1.jpg" alt="房源1">
                                </div>
                                <div class="detail_text">
                                    <div class="address">肇庆市</div>
                                    <div class="title">阳光舒适齐全阳光舒适齐全阳光舒适齐全阳光舒适齐全阳光舒适齐全</div>
                                    <div class="appraise_show">
                                        <div class="stars">
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                            <i class="fa fa-star-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="appraise_number">99条评价</div>
                                        <div class="evaluate_landlord">较好房东</div>
                                    </div>
                                    <div class="price">
                                        ￥99/晚
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <input type="checkbox" v-show="isCheckBoxShow">
                            <a href="detail.html">
                                <div class="thumbnail">
                                    <img src="../imgs/room1.jpg" alt="房源1">
                                </div>
                                <div class="detail_text">
                                    <div class="address">肇庆市</div>
                                    <div class="title">阳光舒适齐全阳光舒适齐全阳光舒适齐全阳光舒适齐全阳光舒适齐全</div>
                                    <div class="appraise_show">
                                        <div class="stars">
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star" aria-hidden="true"></i>
                                            <i class="fa fa-star-half-o" aria-hidden="true"></i>
                                            <i class="fa fa-star-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="appraise_number">99条评价</div>
                                        <div class="evaluate_landlord">较好房东</div>
                                    </div>
                                    <div class="price">
                                        ￥99/晚
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <footer v-show="isFooterShareEdit">
            <div class="share_delete" >
                <div class="share">分享</div>
                <div class="delete">删除</div>
            </div>
        </footer>
    </div>

    `,
    data() {
        return {
            isCheckBoxShow: false,
            shareEditText: '分享/编辑',
            isFooterShareEdit: false
        }
    },
    methods: {
        handleShareEdit() {
            this.isCheckBoxShow = !this.isCheckBoxShow;
            this.isFooterShareEdit = !this.isFooterShareEdit;
            this.isCheckBoxShow ? this.shareEditText = '取消' : this.shareEditText = '分享/编辑';
        }
    }
};
const Interaction = {
    template: `
    <div class="interaction my_width my_padding">
        <div class="interaction_box">
            <p class="interaction_title">交互</p>
            <p class="unread">您没有未读消息</p>
            <ul>
                <li>
                    <div class="interaction_photo">
                        <img src="../imgs/photo/photo1.jpg" alt="头像1">
                    </div>
                    <div class="text_list">
                        <div class="text_row">
                            <div class="username">张三</div>
                            <div class="data_icon">
                                <div class="nowadays">2021-05-31</div>
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="text">
                            <div class="text_row_one">你好啊,我是seno店长，有什么可以帮到您</div>
                            <div class="text_row_two">
                                <div class="finish">行程已完成</div>
                                <div class="finish_time">2021/05/31-2021/06/01</div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="interaction_photo">
                        <img src="../imgs/photo/photo1.jpg" alt="头像1">
                    </div>
                    <div class="text_list">
                        <div class="text_row">
                            <div class="username">张三</div>
                            <div class="data_icon">
                                <div class="nowadays">2021-05-31</div>
                                <i class="fa fa-angle-right" aria-hidden="true"></i>
                            </div>
                        </div>
                        <div class="text">
                            <div class="text_row_one">你好啊,我是seno店长，有什么可以帮到您</div>
                            <div class="text_row_two">
                                <div class="finish">行程已完成</div>
                                <div class="finish_time">2021/05/31-2021/06/01</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>`
};
const My = {
    template: `
    <div class="my my_width my_padding">
        <div class="my_box">
            <div class="bar">
                    <a href="setting.html">
                        <i class="fa fa-cog" aria-hidden="true"></i>
                    </a>
                
            </div>
            <div class="info_photo">
                <div class="infor">
                    <div class="info_name">
                        张三
                    </div>
                    <div class="info_date">
                        今天是RTFH陪伴你的第365天
                    </div>
                    <a href="javascript:;">查看个人资料</a>
                </div>
                <div class="my_photo">
                    <img src="../imgs/photo/photo1.jpg" alt="照片1">
                </div>
            </div>
            <div class="my_order">
                <div class="my_order_title">我的订单</div>
                <div class="order_list">
                    <a href="javascript:;">
                        <i class="fa fa-files-o" aria-hidden="true"></i>
                        <span>全部订单</span>
                    </a>
                    <a href="javascript:;">
                        <i class="fa fa-file-text-o" aria-hidden="true"></i>
                        <span>已支付订单</span>
                    </a>
                    <a href="javascript:;">
                        <i class="fa fa-file-o" aria-hidden="true"></i>
                        <span>未支付订单</span>
                    </a>
                    <a href="javascript:;">
                        <i class="fa fa-university" aria-hidden="true"></i>
                        <span>安全中心</span>
                    </a>
                    <a href="javascript:;">
                        <i class="fa fa-question-circle" aria-hidden="true"></i>
                        <span>需要帮助</span>
                    </a>
                    <a href="javascript:;">
                        <i class="fa fa-history" aria-hidden="true"></i>
                        <span>历史足迹</span>
                    </a>
                </div>
            </div>
            <a href="javascript:;" class="become_landlord">
                成为房东
            </a>
            <div class="other_list">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <span>发布房源</span>
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <span>体验与问卷</span>
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    
    
    `
};